<template>
  <div class="quanbu">
    <div class="Daohang clear">
      <div class="clear DaoHang">
        <div class="Left">
          <el-row class="demo-avatar demo-basic">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="53"
                             :src="circleUrl"></el-avatar>
                </div>
              </div>
            </el-col>

          </el-row>
        </div>
        <div class="Mid">
          <div>
            <div class="idname">
              <p>李思思</p>
            </div>
            <div class="idbtn">
              <el-button plain>退出登录</el-button>
            </div>
          </div>
          <div id="yuangong">
            <p>员工ID：123456</p>
            <el-col :span="12">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-form :model="form"
                           label-width="80px">
                    <el-form-item label="活动名称">
                      <el-form-item v-model="form.name">
                      </el-form-item>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary"
                                 @click="onSubmit">立即创建</el-button>
                    </el-form-item>
                  </el-form>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </div>
        </div>
      </div>
      <div class="daohang">
        <el-menu class="el-menu-demo"
                 mode="horizontal"
                 router>
          <el-menu-item index=" /employee/homepageemployee">工作台</el-menu-item>
          <el-menu-item index="/employee/order">点餐</el-menu-item>
          <el-menu-item index="/employee/table">桌位</el-menu-item>
          <el-menu-item index="/employee/indentemployee/todayorder">订单</el-menu-item>
          <el-menu-item index="/employee/foodmanage">菜品管理</el-menu-item>
        </el-menu>
      </div>
      <div class="icon">
        <i class="el-icon-message-solid"></i>
      </div>

    </div>

    <router-view />

  </div>
</template>

<script>
export default {
  data () {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      form: {
        name: '李思思',

      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!');
    }
  }
}
</script>

<style  scoped>
.DaoHang {
  width: 20%;
  float: left;
}
.Left {
  float: left;
  width: 40%;
  margin-top: 14px;
}
.Mid {
  float: left;
  width: 60%;
  margin-top: 16px;
}

.daohang {
  float: left;
  width: 65%;
  margin-left: 10%;
  margin-top: 10px;
}
#key {
  height: 100%;
}
.Daohang {
  padding: 1% 5% 1% 5%;
  border: 1px solid rgb(230, 230, 230);
}
.el-menu-item {
  font-size: 20px;
  color: black !important;
  margin: 0 2% !important;
}
.idname {
  float: left;
  width: 35%;
}
.idbtn {
  float: left;
  width: 65%;
}
.icon {
  float: left;
  width: 5%;
}
.el-button {
  width: 65px;
  height: 25px;
  line-height: 25px;
  padding: 0px;
}
.el-icon-message-solid {
  font-size: 35px;
  color: rgb(229, 143, 58);
  margin-top: 22px;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.quanbu {
  height: 100%;
}
.el-col {
  float: left;
  width: 10%;
}
#yuangong > p {
  float: left;
  width: 70%;
}
</style>